import { api } from "@/api";
import BannerPage from "@/components/page/BannerPage";
import { Card } from "antd";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  h2 {
    text-align: center;
  }
  .tag-box {
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      margin: 0 10px;
      display: inline-block;
      transition: all 600ms;
      &:hover {
        transform: scale(1.2);
        color: rgba(56, 189, 248, 1) !important;
      }
    }
  }
`;

// 随机字体大小
function randomFontSize() {
  return Math.floor(Math.random() * 16) + 15;
}
// 随机颜色 16进制
function randomColorHex() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

const Tag = () => {
  const [loading, setLoading] = useState(true);
  const [tagList, setTagList] = useState([]);

  useEffect(() => {
    api.getTags().then((res) => {
      setLoading(false);
      setTagList(res.data.list);
    });
  }, []);
  return (
    <Styled>
      <BannerPage label="article_list" loading={loading} title="标签">
        <Card className="card-fade-up">
          <h2>标签-{tagList.length}</h2>
          <div className="tag-box">
            {tagList.map((t) => {
              return (
                <Link
                  to={`/tags/${t.id}?name=${t.name}`}
                  key={t.id}
                  style={{
                    fontSize: `${randomFontSize()}px`,
                    color: `${randomColorHex()}`,
                  }}
                >
                  {t.name}
                </Link>
              );
            })}
          </div>
        </Card>
      </BannerPage>
    </Styled>
  );
};

export default Tag;
